<template>
  <div class="weather-page">
    <!-- 根据URL参数决定显示哪个组件 -->
    <WeatherForecast v-if="!showRouteWeather" />
    <RouteWeatherForecast 
      v-else 
      :start-address="startAddress" 
      :end-address="endAddress" 
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import WeatherForecast from '../components/WeatherForecast.vue'
import RouteWeatherForecast from '../components/RouteWeatherForecast.vue'

const route = useRoute()
const showRouteWeather = ref(false)
const startAddress = ref('')
const endAddress = ref('北京')

onMounted(() => {
  // 检查URL参数
  const startParam = route.query.startAddress as string
  const endParam = route.query.endAddress as string
  
  if (startParam) {
    showRouteWeather.value = true
    startAddress.value = decodeURIComponent(startParam)
    endAddress.value = endParam ? decodeURIComponent(endParam) : '北京'
  } else {
    showRouteWeather.value = false
  }
})
</script>

<style scoped>
.weather-page {
  height: 100%;
  width: 100%;
}
</style>
